@import "base";

.wx-swiper-dots {
  position: absolute !important;
  left: unset !important;
  right: 0 !important;
}

.wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: -5rpx;
}

.nation-products{
  padding-bottom: px2rpx(15);
}

.swiper-view {
  position: relative;
  swiper {
    height: px2rpx(135);
  }
  .swiper-item {
    image {
      width: 100%;
      height: px2rpx(135);
    }
  }
}

.recommend-view{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: px2rpx(15);
  .recommend-item:active{
    opacity: 0.9;
  }
  .recommend-item{
    margin-left: px2rpx(15);
    margin-right: px2rpx(15);
    margin-top: px2rpx(15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background:rgba(255,255,255,1);
    border:1px solid rgba(227,227,227,1);
    border-radius:4px;
    box-shadow: 0 0 px2rpx(10) #E8E8E8;
    .thumb{
      width: px2rpx(346);
      height: px2rpx(159);
    }
    .desc-container{
      display: flex;
      align-items: flex-start;
      margin-top: px2rpx(10);
      .desc{
        display: inline-block;
        margin-left: px2rpx(16);
        margin-right: px2rpx(5);
        color: #333333;
        font-size: px2rpx(12);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        align-content: center;
      }
      .like-comment{
        margin-left: auto;
        margin-right: px2rpx(16);
        display: flex;
        align-items: center;
        text{
          margin-left: px2rpx(5);
          color: #999999;
          font-size: px2rpx(11);
        }
        image{
          width: px2rpx(12);
          height: px2rpx(12);
        }
        .comment-image{
          margin-left: px2rpx(19);
        }
        .comment-container{
          display: flex;
          align-items: center;
        }
      }
    }
    .data{
      display: flex;
      align-items: center;
      margin-left: px2rpx(16);
      margin-top: px2rpx(11);
      text{
        display: inline-block;
      }
      .price{
        color: #F19F00;
        font-size: px2rpx(16);
      }
      .unit{
        color: #F19F00;
        font-size: px2rpx(11);
      }
      .tag{
        margin-left: auto;
        margin-right: px2rpx(15);
        text{
          font-size: px2rpx(12);
          padding: px2rpx(7) px2rpx(15);
          background-color: #FFF6DA;
          color: #F19F00;
        }
        text:nth-child(2){
          margin-left: px2rpx(10);
        }
      }
    }
    .offer-view{
      margin: px2rpx(8) px2rpx(10) px2rpx(12) px2rpx(15);
      display: flex;
      .left{
        .offer{
          margin-top: px2rpx(9);
          display: flex;
          align-items: center;
          text:first-child{
            border-top-left-radius: px2rpx(5);
            border-bottom-right-radius: px2rpx(5);
            width: px2rpx(17);
            height: px2rpx(16);
            text-align: center;
            color: white;
            font-size: px2rpx(10);
          }
          text:nth-child(2){
            margin-left: px2rpx(4);
            color: #FE585A;
            font-size: px2rpx(11);
          }
          .desc{
            margin-top: px2rpx(-5);
            margin-left: px2rpx(10);
          }
        }
        .staging{
          text:first-child{
            background: #FE585A;
          }
          text:nth-child(2){
            color: #FE585A;
          }
        }
        .card{
          text:first-child{
            background: #028BFF;
          }
          text:nth-child(2){
            color: #028BFF;
          }
        }
      }
      .right{
        flex: 1;
        margin-left: px2rpx(12);
        width: px2rpx(269);
        .offer-introduction{
          font-size: px2rpx(11);
          color: #333333;
          line-height: px2rpx(20);
        }
        .price{
          color: #FE585A;
        }
      }
    }
  }
  .empty-data-view{
    text-align: center;
    color: #333333;
    font-size: px2rpx(16);
    margin-top: px2rpx(15);
    margin-bottom: px2rpx(15);
  }
}
